<template>
	<view class="perfectDataBgc">
		<view class="headBox">
			<image :src="src" mode="" class='headImagepo' @click="headImage"></image>
			<!-- <u-upload :action="action" :file-list="fileList" max-count="1" class='headImage' :show-progress='false' :deletable='false'
			 :upload-text='uploadText' @on-uploaded='onChange' ></u-upload> -->
		</view>
		<view class="dataList">
			<view class="dataListBox me-fx-row-start-c">
				<view class="width">
					昵称
				</view>
				<input type="text" value="" placeholder="请填写" v-model="nickName" />
			</view>
			<view class="dataListBox me-fx-row-start-c" @click="show = true">
				<view class="width">
					常住城市
				</view>
				<view class="afterIcon me-fx-row-sb-c ">
					<view class="">
						{{city}}
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
			<view class="dataListBox me-fx-row-start-c" @click="selectorShow = true">
				<view class="width">
					年龄
				</view>
				<view class="afterIcon me-fx-row-sb-c">
					<view class="">
						{{age}}
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
			<view class="dataListBox me-fx-row-start-c" @click="constellationBtn">
				<view class="width">
					星座
				</view>
				<view class="afterIcon me-fx-row-sb-c">
					<view class="">
						{{constellationConter}}
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
			<view class="dataListBox me-fx-row-start-c" @click="occupationShow=true">
				<view class="width">
					职业
				</view>
				<view class="afterIcon me-fx-row-sb-c">
					<view class="">
						{{occupationConter}}
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
			<view class="dataListBox me-fx-row-start-c" @click="program=true">
				<view class="width">
					交友节目
				</view>
				<view class="afterIcon me-fx-row-sb-c">
					<view class="me-text-beyond">
						<block v-if="please">请填写</block>
						<block v-else v-for="item in programConter">
							{{item}},
						</block>
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
			<view class="dataListBox me-fx-row-start-c" @click="QWobjectBtn">
				<view class="width">
					期望对象
				</view>
				<view class="afterIcon me-fx-row-sb-c">
					<view class="me-text-beyond">
						<block v-if="pleaseObj">
							请填写
						</block>
						<block v-else v-for="item in object">
							{{item}},
						</block>
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="moreInfomation">
			更多信息(选填)
		</view>
		<view class="moreData ">
			<view class="moreDataList me-fx-row-start-c height" @click="heightBtn">
				<view class="width">
					身高
				</view>
				<view class="afterIcon me-fx-row-sb-c">
					<view class="">
						{{stature}}
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
			<view class="moreDataList me-fx-row-start-c height" @click="wightBtn">
				<view class="width">
					体重
				</view>
				<view class="afterIcon me-fx-row-sb-c">
					<view class="">
						{{weight}}
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
			<view class="moreDataList ">
				<view class="width marginTop">
					个人介绍
				</view>
				<textarea value="" placeholder="介绍自己" class="introduce" v-model="introduce" />
				</view>
		</view>
		<view class="submitBtn"@click="submitBtn">
			提交
		</view>
		<view class="consent">
			点击进入表示你已阅读并同意<text>《用户协议》</text>
		</view>
		<!-- 城市 -->
				<u-picker mode="region" v-model="show"  :default-selector="[0]" @confirm='confirm'></u-picker>
		<!-- 年龄 -->
		<u-picker v-model="selectorShow" mode="selector" :range="selectorage" @confirm='ageBtn'></u-picker>
		<!-- 星座 -->
		<u-picker v-model="constellationShow" mode="selector" :range="constellation" range-key="name" :data-kk="constellation.id" @confirm='constellationSure' ></u-picker>
		<!-- 职业 -->
		<u-picker v-model="occupationShow" mode="selector" :range="occupation" range-key="name" @confirm='occupationSrue'></u-picker>
		<!-- 身高 -->
		<u-picker v-model="heightShow" mode="selector" :range="height" @confirm='heightSure'></u-picker>
		<!-- 体重 -->
		<u-picker v-model="wightShow" mode="selector" :range="weightRang" @confirm='wightSure'></u-picker>
		<!-- 交友节目 -->
		<view class="Covering" v-if="program">
			<view class="bottomFiex">
				<view class="topHead me-fx-row-sb-c">
					<view class="blure">取消</view>
					<view>交友节目</view>
					<view @click="bottomSure" class="blure">确定</view>
				</view>
				<view class="bottomConterBox">
					 <checkbox-group >
						<label   class="worker-bar me-fx-row-c bottomConter" v-for="item in bottomConter" :key="item.id" :data-id='item.id' :data-name='item.name' @click="checkBoxBtn">
												<view>{{item.name}}</view>
												<checkbox :value="item.name" :checked="item.isSlected" />
											</label>
											 </checkbox-group>					 
				</view>
				<view class="bottomConterBox2 me-fx-row-c">
					<view class="bottomConterList" v-for="(item, index) in bottomConterList" >
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<!-- 期望对象 -->
		<view class="Covering" v-if="QWobject">
			<view class="bottomFiex">
				<view class="topHead me-fx-row-sb-c">
					<view class="blure">取消</view>
					<view>期望对象</view>
					<view @click="QWobjectSure" class="blure" >确定</view>
				</view>
				<view class="bottomConterBox">
					 <checkbox-group >
						<label   class="worker-bar me-fx-row-c bottomConter" v-for="item in QWobjectConter" :key="item.id" :data-id='item.id' :data-name='item.name' @click="checkboxQWobject" >
												<view>{{item.name}}</view>
												<checkbox :value="item.name" :checked="item.isSlected" />
											</label>
											 </checkbox-group>
				</view>
				<view class="bottomConterBox2 me-fx-row-c">
					<view class="bottomConterList" v-for="(item, index) in QWobjectConterList" >
						{{item}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCaption} from '@/utils/utils'
	import {
		url
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				
					params: {
							year: true,
							month: true,
							day: true,
						},
				show: false,
				nickName:'',
				action: url+'/image/upload',
				fileList: [], 
				uploadText:"上传头像",
				address:'',
				selectorShow:false,
				city:"请填写",
				weight:"请填写",
				stature:'请填写',
				object:'请填写',
				programConter:"请填写",
				occupationConter:'请填写',
				constellationConter:'请填写',
				age:'请填写',
				selectorage:[],
				constellation:[],
				constellationShow:false,
				occupationShow:false,
				occupation:[],
				introduce:'',	
				height:[],
				program:false,
				bottomConter:[],
					QWobjectConter:[],
				bottomConterList:[],
				QWobject:false,
				QWobjectConterList:[],
				please:true,
				pleaseObj:true,
				heightShow:false,
				wightShow:false,
				weightRang:[],
				constellationIndex:-1,
				occupationIndex:-1,
				bottomConterID:[],
				QWobjectConterID:[],
				constellationID:-1,
				occupationID:-1,
				src:'../../static/img/touxiang.png'
				
			        }
		},
		created(){
			this.constellationData();
			this.occupationData();
			this.programData();
			this.QWobjectConterData();
			for(let i= 18; i<101; i++ ){
				this.selectorage.push(i)
			}
			for(let i= 140; i<220; i++ ){
				this.height.push(i)
			}
			for(let i= 80; i<250; i++ ){
				this.weightRang.push(i)
			}
		},
		methods: {
		headImage(){
			uni.chooseImage({
			    success: (chooseImageRes) => {
			        const tempFilePaths = chooseImageRes.tempFilePaths;
			        uni.uploadFile({
			            url: url+'/image/upload', //仅为示例，非真实的接口地址
			            filePath: tempFilePaths[0],
			            name: 'file',
			            formData: {
			                'user': 'test'
			            },
			            success: (uploadFileRes) => {
							this.src =JSON.parse(uploadFileRes.data).url
			            }
			        });
			    }
			});
		},
		checkBoxBtn (e){
			this.bottomConterList.push(e.currentTarget.dataset.name)
			this.bottomConterID.push(e.currentTarget.dataset.id)
		},
		bottomSure(){
			this.please=false
			this.program=false
			this.programConter=this.bottomConterList
			this.bottomConterList=[]
		},
		heightBtn(){
			this.heightShow=true
		},
		constellationSure(e){
			this.constellationIndex =e[0]
			this.constellationConter =this.constellation[this.constellationIndex].name
			this.constellationID=this.constellation[this.constellationIndex].id
		},
		constellationBtn(){
			this.constellationShow=true
		},
		occupationSrue(e){
			console.log(e,this.occupation,'zhiye ')
			this.occupationIndex=e[0]
			this.occupationConter =this.occupation[this.occupationIndex].name
			this.occupationID=this.occupation[this.occupationIndex].id
		},
		ageBtn(e){
			let index =e[0]
			this.age =this.selectorage[index]
		},
		wightSure(e){
			this.wightShow=false;
			this.weight=this.weightRang[e]
		},
		wightBtn(){
			this.wightShow=true
		},
		QWobjectBtn(){
			this.QWobject=true
		},
		QWobjectSure(){
			this.QWobject=false
			this.pleaseObj=false
			this.object =this.QWobjectConterList
			this.QWobjectConterList=[]
		},
		heightSure(e){
			this.heightShow=false;
			this.stature = this.height[e]
		},
		checkboxQWobject(e){
			this.QWobjectConterID.push(e.currentTarget.dataset.id)
			this.QWobjectConterList.push(e.currentTarget.dataset.name)
			console.log(e,'选择')
		},
		submitBtn(){
			if(this.nickName == ''){
				uni.showToast({
					title:'请输入昵称',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.address ==''){
				uni.showToast({
					title:'请选择地址',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.age ==''){
				uni.showToast({
					title:'请选择年龄',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.constellationConter ==''){
				uni.showToast({
					title:'请选择星座',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.occupationConter ==''){
				uni.showToast({
					title:'请选择职业',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.programConter.length ==0){
				uni.showToast({
					title:'请选择交友节目',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.object.length==0){
				uni.showToast({
					title:'请选择期望对象',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.stature ==''){
				uni.showToast({
					title:'请选择身高',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.weight==''){
				uni.showToast({
					title:'请选择体重',
					duration:1000,
					icon:'none'
				})
				return
			}else if(this.introduce==''){
				uni.showToast({
					title:'请输入个人介绍',
					duration:1000,
					icon:'none'
				})
				return
			}
			let dataObj={
				username:this.nickName,
				city:this.address,
				avatar:this.src,
				age:this.age,
				constellation_id:this.constellationID,
				job_id:this.occupationID,
				show_menu_id_collection:this.bottomConterID,
				expect_obj_tag_id_collection:this.QWobjectConterID,
				longitude:this.longitude,
				latitude:this.latitude,
				height:this.stature,
				weight:this.weight,
				introduce:this.introduce,
				
				
			}
			let dataObj2={}
			uni.getStorage({
				key: 'item2',
				success:(e)=> {
					dataObj2=e.data
				}
			})
			let obj3={
				...dataObj,
				...dataObj2
			}
			console.log(obj3,'obj3')
			this.$u.post('/user/add',obj3).then(res => {
				if(res){
					uni.showToast({
						title:res.message,
						duration:1000,
						icon:'none'
					})
					uni.setStorage({
					    key: 'token',
					    data:'Bearer '+ res.data.token, 
					});
					setTimeout(()=>{
						uni.switchTab({
							url:'../indexPage/indexPage'
						})
					},1000)
					console.log(res,'res')
				}
			})
			.catch((res) => {
				console.log(res.message)
			})
			},
		confirm(e){
			if(e.province.value == '11'){
				this.address=e.province.label
			}else if(e.province.value == '12'){
				this.address=e.province.label
			}else if(e.province.value == '31'){
				this.address=e.province.label
			}else {
				this.address=e.city.label
			}
				this.city=e.area.label+'-'+e.city.label+'-'+e.province.label
				this.adress();
		},
		constellationData(){
			this.$u.get('/constellation/index').then(res => {
				if(res){
					this.constellation=res.data.list
				}
			})
			.catch((res) => {
				console.log(res.message)
			})
		},
		occupationData(){
			this.$u.get('/job/index').then(res => {
				if(res){
					this.occupation=res.data.list
				}
			})
			.catch((res) => {
				console.log(res.message)
			})
		},
		programData(){
			this.$u.get('/show_menu/index').then(res => {
				if(res){
					this.bottomConter=res.data.list
					console.log(res,'res')
				}
			})
			.catch((res) => {
				console.log(res.message)
			})
		},
		QWobjectConterData(){
			this.$u.get('/expect_obj_tag/index').then(res => {
				if(res){
					this.QWobjectConter=res.data.list
					console.log(res,'res')
				}
			})
			.catch((res) => {
				console.log(res.message)
			})
		},
		adress(){
			uni.request({
			    url: 'https://restapi.amap.com/v3/geocode/geo?address='+this.address +'&output=' +'json' +'&key='+'05e3d79d2c398c35eea3ced5e55f2e00',
			    header: {
			        "Content-Type": "application/json",
			    },
				method:'get',
			    success: (res) => {
					 this.longitude=getCaption(res.data.geocodes[0].location,0);
					this.latitude=getCaption(res.data.geocodes[0].location,1);
					console.log(this.longitude,this.latitude)
			    },
				fail:(res)=>{
					uni.showToast({
						title:'网络异常',
						duration:1000,
						icon:'none'
					})
				}
			});
			
			
		    },
		
		}
	}
</script>

<style>

	.headBox {
		width: 100%;
		height: 230rpx;
		margin: auto;
		position: relative;
	}
	.bottomConterBox{
		margin-top: 20rpx;
	}
	.bottomConterBox /deep/.uni-checkbox-input{
		border: none!important;
	}
	.headImagepo{
		display: block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			padding: 30rpx 0 27rpx;
			margin:0 auto;
	}
.headImage /deep/.u-add-tips{
	   width: 100%;
	       height: 100px;
	       padding-top: 60px;
	}
.headImage /deep/.u-list-item {
　　display: block;
width: 100%;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	padding: 30rpx 0 27rpx;
	margin:0 auto;
	overflow: inherit;
}
	.headBox view {
		font-size:26rpx;
		font-weight:400;
		color:rgba(153,153,153,1);
		text-align: center;
	}

	.perfectDataBgc {
		background-color: #F5F5F5;
	}

	.dataList {
		padding: 20rpx;
		background-color: white;
	}
.dataList .dataListBox:nth-of-type(n+2){
	width: 100%;
	border-top: 1rpx solid #DCDCDC;
}
.dataList .dataListBox{
	height: 110rpx;
	line-height: 80rpx;
}
	.dataList .dataListBox .width{
		width: 140rpx;
	
	}
.moreData{
	background-color: white;
	padding: 20rpx;
	
}
.moreData .moreDataList:nth-of-type(n+2){
	width: 100%;
	border-top: 1rpx solid #DCDCDC;
}
.moreData .height{
	height: 80rpx;
		line-height: 80rpx;
		background-color: white;
		}

.moreData .moreDataList .width{
	width: 140rpx;
}
.moreInfomation{
	padding: 40rpx 20rpx 10rpx;
}
.introduce{
	    padding: 11px;
	    color: #DCDCDC;
	    width: 100%;
	    box-sizing: border-box;
}
.submitBtn{
	width: 80%;
	margin:20rpx auto;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	color: white;
	border-radius: 50rpx;
	background-color: #0079F4;
}
.consent{
	text-align: center;
}
.afterIcon {
	width: 70%!important;
	
}
	.afterIcon image{
		width: 20rpx;
		height: 10rpx;
		display: block;
	}
	.afterIcon view{
		font-size:28rpx;
		font-weight:400;
		color:rgba(196,196,196,1);
		}
	.bottomFiex{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100;
		background-color: white;
		padding: 20rpx;
		    width: 100%;
	}	
	.bottomConterBox .bottomConter:nth-of-type(n+2){
		border-top: 1rpx solid #ccc;
	}
	.bottomConter{
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ccc;
		font-size: 24rpx;
	}
	.bottomConter view {
		/* margin-right:20rpx */
	}
	.bottomConterList{
		padding: 4rpx 6rpx;
		border:1rpx #0077FF solid ;
		margin-right: 20rpx;
		margin-top: 20rpx;
		color: #ccc;
	}
	.bottomConterBox2{
		flex-wrap: wrap
	}
	.blure{
		color: #0079F4;
	}
	.marginTop{
		margin-top: 10rpx;
	}
</style>
